<template>
    <sTextHeadVue>IconList</sTextHeadVue>
    <div class="icon-box" >
        <span class="icon-item-box" v-for="item in fontlist" :key="item">
            <SIcon :iconName="item"></SIcon>
            <p class="icon-name">{{item}}</p>
        </span>
    </div>
</template>

<script setup>
import {ref, reactive, defineProps} from 'vue'
import { fontlist } from '../../../styles/font.info';
import SIcon from "./../../../s-components/s-icon/s-icon.vue"
import sTextHeadVue from '../../../s-components/s-text-head/s-text-head.vue';



</script>

<style scoped>
.icon-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.icon-item-box:hover {
  margin-top: calc(.5em - 5px);
  box-shadow:  0 0 5px 0 #ddd;
}

.icon-item-box {
  margin: .5em;
  padding: .5em;
  display: inline-block;
  text-align: center;
  width: 80px;
  height: 80px;
  border: 1px solid #629f7f;
  border-radius: 3px;
  transition: .2s all ease-in-out;
}

.icon-name {
  font-size:10px;
  color:#629f7f;
}
</style>